<template>
  <div id="resultChart" :style="{ width, height }"></div>
</template>

<script setup lang="ts">
import type { SunnyResult, SunnyResultVO } from "@/types/sunnyResult/type";
import { init } from "echarts";
import { onMounted, onUnmounted, ref } from "vue";
import type { EChartsType } from "echarts";
import { nextTick } from "vue";
import { useChartStore } from "@/stores/chartStore";

const chartStore = useChartStore();
let chart: EChartsType;

const props = defineProps({
  width: { type: String, default: "100%" },
  height: { type: String, default: "300px" },
  chartData: { type: Array<SunnyResultVO>, required: true },
});

onMounted(() => {
  //防止div还没加载的时候就开始去进行chart的初始化，等到vue完成一个tick的HTML元素更新之后再进行操作。
  nextTick(() => {
    initChart();
  }).then(() => {
    chartStore.listenResize(chart);
  });
});

/**
 * 完成事件的解绑
 */
onUnmounted(() => {
  chartStore.removeListener(chart);
});

function initChart() {
  chart = init(document.getElementById("resultChart") as HTMLDivElement);
  chart.setOption({
    title: {
      show: true,
      text: "执行概况",
      textStyle: {
        fontSize: 20,
        color: "#409EFF",
        fontWeight: "bold",
      },
      textAlign: "center",
      left: "center",
      padding: 5,
    },

    visualMap: [
      {
        show: false,
        type: "continuous",
        //配置图形中的第几个应用视觉效果
        seriesIndex: 4,
        min: 0,
        inRange: {
          color: [
            "#F56C6C",
            "#E6A23C",
            "rgb(254, 242, 0)",
            "#67C23A",
            "#67C23A",
            "#67C23A",
            "#67C23A",
          ],
        },
      },
    ],

    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    legend: {
      top: "bottom",
      left: "center",
      data: ["用例数", "用例通过数", "用例跳过数", "用例失败数", "用例通过率"],
    },
    xAxis: [
      {
        type: "category",
        data: props.chartData.map(
          (element) => "第" + element.buildOrder + "次"
        ),
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "用例数（条）",
        min: 0,
        axisLabel: {
          formatter: "{value} 条",
        },
      },
      {
        type: "value",
        name: "用例通过率（%）",
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: "{value} %",
        },
      },
    ],
    series: [
      {
        name: "用例数",
        type: "bar",
        //配置显示在tooltip弹窗中的内容
        tooltip: {
          valueFormatter: function (value: any) {
            return value + " 条";
          },
        },
        data: props.chartData.map((element) => element.caseCount),
      },
      {
        name: "用例通过数",
        type: "bar",
        tooltip: {
          valueFormatter: function (value: any) {
            return value + " 条";
          },
        },
        data: props.chartData.map((element) => element.passCount),
      },
      {
        name: "用例跳过数",
        type: "bar",
        tooltip: {
          valueFormatter: function (value: any) {
            return value + " 条";
          },
        },
        data: props.chartData.map((element) => element.failCount),
      },
      {
        name: "用例失败数",
        type: "bar",
        tooltip: {
          valueFormatter: function (value: any) {
            return value + " 条";
          },
        },
        data: props.chartData.map((element) => element.skippedCount),
      },
      {
        name: "用例通过率",
        type: "line",
        //所对应的是指定的条数
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value: any) {
            return value + "%";
          },
        },
        data: props.chartData.map((element) => element.passRate.toFixed(2)),
      },
    ],
  });
}
</script>

<style scoped>
div {
  color: rgb(254, 242, 0);
}
</style>
